/* 根元素CSS变量定义 */
:root {
  /* 头部导航栏高度 */
  --header-height: 3rem;

  /*========== 主题色彩变量 ==========*/
  /* 主色调色相值，可以通过修改这个值来改变整个网站的主色调 */
  --hue-color: 250; /* 紫色 250 - 绿色 142 - 蓝色 230 - 粉色 340 */

  /* HSL颜色模式变量定义 */
  --first-color: hsl(var(--hue-color), 69%, 61%);          /* 主色调 */
  --first-color-second: hsl(var(--hue-color), 69%, 61%);   /* 次要主色调 */
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);      /* 主色调的替代色 */
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);  /* 主色调的浅色版本 */
  --title-color: hsl(var(--hue-color), 8%, 15%);           /* 标题文字颜色 */
  --text-color: hsl(var(--hue-color), 8%, 45%);            /* 正文文字颜色 */
  --text-color-light: hsl(var(--hue-color), 8%, 65%);      /* 浅色文字 */
  --input-color: hsl(var(--hue-color), 70%, 96%);          /* 输入框背景色 */
  --body-color: hsl(var(--hue-color), 60%, 99%);           /* 页面背景色 */
  --container-color: hsl(var(--hue-color), 100%, 98%);     /* 容器背景色 */
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);     /* 滚动条颜色 */
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);   /* 滚动条滑块颜色 */

  /*========== 字体和排版 ==========*/
  /* 网站使用的字体 */
  --body-font: 'Poppins', sans-serif;

  /* 字体大小变量定义 */
  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
  --big-font-size: 2rem;           /* 大标题字体大小 */
  --h1-font-size: 1.5rem;          /* h1标题字体大小 */
  --h2-font-size: 1.25rem;         /* h2标题字体大小 */
  --h3-font-size: 1.125rem;        /* h3标题字体大小 */
  --normal-font-size: .938rem;     /* 正常文本字体大小 */
  --small-font-size: .813rem;      /* 小文本字体大小 */
  --smaller-font-size: .75rem;     /* 更小文本字体大小 */

  /*========== 字体粗细 ==========*/
  --font-medium: 500;              /* 中等字重 */
  --font-semi-bold: 600;           /* 半粗体字重 */

  /*========== 底部外边距 ==========*/
  /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
  --mb-0-25: .25rem;               /* 最小外边距 */
  --mb-0-5: .5rem;                 /* 小外边距 */
  --mb-0-75: .75rem;               /* 中等外边距 */
  --mb-1: 1rem;                    /* 标准外边距 */
  --mb-1-5: 1.5rem;                /* 大外边距 */
  --mb-2: 2rem;                    /* 更大外边距 */
  --mb-2-5: 2.5rem;                /* 特大外边距 */
  --mb-3: 3rem;                    /* 最大外边距 */

  /*========== z-index层级 ==========*/
  --z-tooltip: 10;                 /* 提示框层级 */
  --z-fixed: 100;                  /* 固定元素层级 */
  --z-modal: 1000;                 /* 模态框层级 */
}

/* 大屏幕设备字体大小调整 */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;         /* 大标题字体大小增加 */
    --h1-font-size: 2.25rem;       /* h1标题字体大小增加 */
    --h2-font-size: 1.5rem;        /* h2标题字体大小增加 */
    --h3-font-size: 1.25rem;       /* h3标题字体大小增加 */
    --normal-font-size: 1rem;      /* 正常文本字体大小增加 */
    --small-font-size: .875rem;    /* 小文本字体大小增加 */
    --smaller-font-size: .813rem;  /* 更小文本字体大小增加 */
  }
}

